<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>commabody</title>
    <link rel="stylesheet" href="/static/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" /><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js" integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
  </head>
  <body>
    <div id="main">
      <p class="jumbo">comma body</p>
      <audio id="audio" autoplay="true"></audio>
      <video id="video" playsinline autoplay muted loop poster="/static/poster.png"></video>
      <div id="icon-panel" class="row">
        <div class="col-sm-12 col-md-6 details">
          <div class="icon-sup-panel col-12">
            <div class="icon-sub-panel">
              <div class="icon-sub-sub-panel">
                <i class="bi bi-speaker-fill pre-blob"></i>
                <i class="bi bi-mic-fill pre-blob"></i>
                <i class="bi bi-camera-video-fill pre-blob"></i>
              </div>
              <p class="small">body</p>
            </div>
            <div class="icon-sub-panel">
              <div class="icon-sub-sub-panel">
                <i class="bi bi-speaker-fill pre-blob"></i>
                <i class="bi bi-mic-fill pre-blob"></i>
              </div>
              <p class="small">you</p>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-6 details">
          <div class="icon-sup-panel col-12">
            <div class="icon-sub-panel">
              <div class="icon-sub-sub-panel">
                <i id="ping-time" class="pre-blob1">-</i>
              </div>
              <p class="bi bi-arrow-repeat small"> ping time</p>
            </div>
            <div class="icon-sub-panel">
              <div class="icon-sub-sub-panel">
                <i id="battery" class="pre-blob1">-</i>
              </div>
              <p class="bi bi-battery-half small"> battery</p>
            </div>
          </div>
        </div>
        <!-- <div class="icon-sub-panel">
                <button type="button" id="start" class="btn btn-light btn-lg">Start</button>
                <button type="button" id="stop" class="btn btn-light btn-lg">Stop</button>
            </div> -->
      </div>
      <div class="row" style="width: 100%; padding: 0px 10px 0px 10px;">
        <div id="wasd" class="col-md-12 row">
          <div class="col-md-6 col-sm-12" style="justify-content: center; display: flex; flex-direction: column;">
            <div class="wasd-row">
              <div class="keys" id="key-w">W</div>
              <div id="key-val"><span id="pos-vals">0,0</span><span>x,y</span></div>
            </div>
            <div class="wasd-row">
              <div class="keys" id="key-a">A</div>
              <div class="keys" id="key-s">S</div>
              <div class="keys" id="key-d">D</div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12 form-group plan-form">
            <label for="plan-text">Plan (w, a, s, d, t)</label>
            <label style="font-size: 15px;" for="plan-text">*Extremely Experimental*</label>
            <textarea class="form-control" id="plan-text" rows="7" placeholder="1,0,0,0,2"></textarea>
            <button type="button" id="plan-button" class="btn btn-light btn-lg">Execute</button>
          </div>
        </div>
      </div>
      <div class="row" style="padding: 0px 10px 0px 10px; width: 100%;">
        <div class="panel row">
          <div class="col-sm-3" style="text-align: center;">
            <p>Play Sounds</p>
          </div>
          <div class="btn-group col-sm-8">
            <button type="button" id="sound-engage" class="btn btn-outline-success btn-lg sound">Engage</button>
            <button type="button" id="sound-disengage" class="btn btn-outline-warning btn-lg sound">Disengage</button>
            <button type="button" id="sound-error" class="btn btn-outline-danger btn-lg sound">Error</button>
          </div>
        </div>
      </div>
      <div class="row" style="padding: 0px 10px 0px 10px; width: 100%;">
        <div class="panel row">
          <div class="col-sm-6"><canvas id="chart-ping"></canvas></div>
          <div class="col-sm-6"><canvas id="chart-battery"></canvas></div>
        </div>
      </div>
    </div>
    <script src="/static/js/jsmain.js" type="module"></script>
  </body>
</html>
